<%--
  Created by IntelliJ IDEA.
  User: 24255
  Date: 2019/8/22
  Time: 23:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领养交流大厅</title>

    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <!-- css files -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" media="all" />

</head>
<body>
<jsp:include page="navigation.jsp"></jsp:include>
<!-- services -->

<div class="services" id="services">
    <div class="container">
        <h3 class="agile-title">领养交流中心</h3>
        <div class="w3_agile_services_grids">

        </div>
    </div>
</div>

<div class="row">
    <!-- 分页条信息 -->
    <div class="col-md-5" id="page_info_area"></div>
    <div class="col-md-4 myPage" id="page_nav_area"></div>
</div>


<!-- js -->
<script src="${pageContext.request.contextPath}/JQuery/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>

<script type="text/javascript">
    //总的数据 当前的页面

    var totalRecord,currentPage;

    $(function(){
        to_page(1);
    });
    function to_page(pn){
        $.ajax({
            url:"${pageContext.request.contextPath}/pet/getAdoptAnimal",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //1、解析并显示员工数据
                build_pets_table(result);
                //3、解析显示分页条数据
                build_page_nav(result);
            }
        });
    }

    function build_pets_table(result){
        //清空table表格
        $(".w3_agile_services_grids").empty();
        //index：下标 user：单个对象
        var pets=result.data.list;
        $.each(pets,function(index,pet){
            var divTd=$("<div></div>").addClass("ih-item circle effect1 agile_services_grid");
            var headTd=$("<div></div>").addClass("spinner");
            var imgTd=$("<div></div>").addClass("img").append($("<img/>").addClass("img-responsive").attr("src","${pageContext.request.contextPath}/images/"+pet.pic).attr("pet-id",pet.id));
            // imgTd.attr("pet-id",pet.id);
            /*$(".img-responsive").attr("pet-id",pet.id);*/
            divTd.append(headTd);
            divTd.append(imgTd);
            var fileTd=$("<fieldset></fieldset>");
            var animalTd=$("<legend></legend>").append(pet.petName);
            fileTd.append(animalTd).append(pet.remark);

            $("<div></div>").addClass("col-md-4 col-sm-4 col-xs-4 w3_agile_services_grid").attr("data-aos","zoom-in")
                .append(divTd)
                .append(fileTd)
                .appendTo(".w3_agile_services_grids");
        });
    }

    //解析显示分页条，点击分页要能去下一页....
    function build_page_nav(result){
        //page_nav_area
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //构建元素
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.data.hasPreviousPage == false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //为元素添加点击翻页的事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.data.pageNum -1);
            });
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(result.data.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function(){
                to_page(result.data.pageNum +1);
            });
            lastPageLi.click(function(){
                to_page(result.data.pages);
            });
        }

        //添加首页和前一页 的提示
        ul.append(firstPageLi).append(prePageLi);
        //1,2，3遍历给ul中添加页码提示
        $.each(result.data.navigatepageNums,function(index,item){

            var numLi = $("<li></li>").append($("<a></a>").append(item));
            if(result.data.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页 的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");

    }

    $(document).on("click",".img-responsive",function(){
        var id = $(this).attr("pet-id");
        console.log($(this));
        console.log(id);
        $.ajax({
            url:"${pageContext.request.contextPath}/pet/findByPetId?id="+id,
            type:"GET",
            success:function (result) {
                window.location.href="${pageContext.request.contextPath}/chatHall/toChatHall?petId="+id;
            },
            error:function (result) {
                alert("跳转查询失败");
            }
        })
    })
</script>

</body>

</html>